/*
 * @Author: wangzhichao
 * @Date: 2025-01-25 23:04:54
 * @LastEditors: your Name
 * @LastEditTime: 2025-01-26 14:53:35
 * @Description: 
 */
$(document).ready(function() {
  // https://car-lock.oss-cn-guangzhou.aliyuncs.com/tianhecheng.mp4
  // https://car-lock.oss-cn-guangzhou.aliyuncs.com/tianhecheng.gif
  var packageList = [{
    name: `品牌祝福`,
    title: `天河城祝您新春快乐!`,
    desc: `蛇年大吉，万事如意`,
    btnText: `点击领取更多福利`,
    bigImg: `../img/bigImg.png`,
    miniImg: `../img/miniImg.png`,
    video: '../img/tianhecheng.mp4',
    videoImg: '../img/video_mini_img.jpg',
    url: ``
  },{
    name: `红包封面`,
    title: `天河城祝您新春快乐!`,
    desc: `2025天河城春节不打烊，各类好货等你来逛`,
    btnText: `领取红包封面`,
    bigImg: `../img/bigImg.png`,
    miniImg: `../img/miniImg.png`,
    url: `https://support.weixin.qq.com/cgi-bin/mmsupport-bin/showredpacket?signature=7b2d8dc1187cf65a0e812362af743567a201e30b6f009176262934fd61f8c1ef&combinereceiveuri=dJatXbsaqbxGZ38R&check_type=3&request_id=MjM5Mzc2MjQzMQ%3D%3D%3B2653894060%3B1%3B1737794333133&sessionid=-1649259193#wechat_redirect`
  }]
  var currentPackage = packageList[0]

  // 初始化底部的红包列表
  var initPackageListFunc = function(){
    // 遍历 list 数组
    let htmlContent = ''; // 用于存放拼接的 HTML 内容
    packageList.forEach(function(item) {
      // 将每个 package_item 的 HTML 内容拼接到 htmlContent 变量中
      htmlContent += `<div class="package_item ${item.name === currentPackage.name ? 'active' : ''}">
        <div class="package_item_img"><img src="${item.miniImg}" /></div>
        <div class="package_item_text">${item.name}</div>
      </div>`;
    });

    // 将拼接好的 HTML 插入到 #package_list 中
    $('#package_list').html(htmlContent);
  }
  var initTextFunc = function(){
    packageList.forEach(function(item, index) {
      $(`.package_box_${index} .package_box_title`).text(item.title)
      $(`.package_box_${index} .package_box_desc`).text(item.desc)
      $(`.package_box_${index} .package_button`).text(item.btnText)
      if(item.video){
        $(`.package_box_${index} .package_media_box`).html(`<div class="package_video_box" id="package_video_box"><video width="85%" webkit-playsinline playsinline loop>
          <source src="${item.video}" type="video/mp4" poster="${item.videoImg}"/>
        </video></div>`)
      }else{
        $(`.package_box_${index} .package_media_box`).html(`<div class="package_img_box"><img src="${currentPackage.bigImg}" /></div>`)
      }
    })
  }
  var initAllFunc = function(){
    initTextFunc()
    initPackageListFunc()
  }
  initAllFunc()

  // 点击领取
  $('.package_button').click(function(){
    var index = $(this).closest('.package_box').index()
    // 1则是品牌祝福，2则是红包封面
    if(packageList[index-1]){
      if(packageList[index-1].video){
        $('.package_item').removeClass('active');
        $('.package_item').eq(index).addClass('active');
        $('.package_video_box video')[0].pause()
        $(`.package_box`).removeClass('show')
        $(`.package_box_${index}`).addClass('show')
      }else{
        window.open(packageList[index-1].url)
      }
    }
  })
  // 监听 .package_item 的点击事件
  $('#package_list').on('click', '.package_item', function() {
    // 移除所有 .package_item 元素上的 active 类
    $('.package_item').removeClass('active');
    
    // 为当前点击的 .package_item 添加 active 类
    $(this).addClass('active');
    // 获取当前点击元素的索引（从0开始）
    var index = $(this).index();
    if(index ===0 ){
      $('.package_video_box video')[0].play()
    }else{
      $('.package_video_box video')[0].pause()
    }
    $(`.package_box`).removeClass('show')
    $(`.package_box_${index}`).addClass('show')
  });

  $('.package_share_box').click(function(){
    $('.share_mask').show()
  })
  $('.share_mask').click(function(){
    $('.share_mask').hide()
  })

  // gif需要点击
  $('#gif_last_btn').click(function(){
    $('.gif_box').hide()
    $('.package_video_box video')[0].play()
  })
  $('.dialog_btn').click(function(){
    $('.dialog_box').hide()
    $('.gif_box').hide()
    $('.package_video_box video')[0].play()
  })
  var img = document.getElementById('gifImg');
  // 直接监听 'load' 事件
  img.onload = function() {
    setTimeout(function() {
      $('#gifImg').hide()
      $('#gif_last').show()
      $('#gif_last_btn').css({'display': 'flex'})
      // $('.dialog_box').show()
      // $('.gif_box').hide()
      // $('.package_video_box video')[0].play()
    }, 8000);
  };
  // 如果图片已经缓存，手动触发 load 事件
  if (img.complete) {
    img.onload();
  }
});
